<style lang="less">
.vertical-center-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 700px;

    .ivu-modal {
        top: 0;
    }
}
</style>
<template>
    <Modal
        :styles="styles"
        v-model="drawer.show"
        :title="lang.new"
        width="1024"
        :transfer="false"
        :before-close="handleCloseEdit">
        <span slot="header" :style="form.titleStyle">{{lang.new}}</span>
        <div style="min-height: 320px; height:320px;overflow-y: auto;overflow-x:hidden;margin: 10px;">
            <Form ref="_frm" :model="cloneData" :rules="ruleValidate" :label-width="labelWidth" :label-position="labelPosition">
                <Row :gutter="32">
                    <Col span="12">
                        <FormItem prop="type" :label="lang.type">
                            <Select v-model="cloneData.type" transfer :clearable="false">
                                <Option v-for="item in typeList" :key="item.label" :value="item.value">{{
                                        item.label
                                    }}
                                </Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem prop="className" :label="lang.className">
<!--                            <Select v-model="cloneData.className" transfer :clearable="false">-->
<!--                                <Option v-for="item in modelClassList" :key="item.label" :value="item.value">-->
<!--                                    {{ item.label }}-->
<!--                                </Option>-->
<!--                            </Select>-->
                          <Input v-model="cloneData.className" :placeholder="lang.classNamePlaceholder"
                                 maxlength="50"/>
                        </FormItem>
                    </Col>
                </Row>
<!--                <Row :gutter="32">-->
<!--                    <Col span="12">-->
<!--                        <FormItem prop="version" :label="lang.version">-->
<!--                            <Input v-model="cloneData.version" clearable :placeholder="lang.versionPlaceholder"-->
<!--                                   maxlength="10"/>-->
<!--                        </FormItem>-->
<!--                    </Col>-->
<!--                    <Col span="12">-->
<!--                        <FormItem prop="published" :label="lang.published">-->
<!--                            <RadioGroup v-model="cloneData.published">-->
<!--                                <Radio :label="false" border></Radio>-->
<!--                                <Radio :label="true" border></Radio>-->
<!--                            </RadioGroup>-->
<!--                        </FormItem>-->
<!--                    </Col>-->
<!--                </Row>-->
                <Row :gutter="32">
                    <Col span="12">
                        <FormItem prop="name" :label="lang.instanceName">
                            <Input v-model="cloneData.name" clearable :placeholder="lang.instanceNamePlaceholder"
                                   maxlength="64"/>
                        </FormItem>
                    </Col>
                    <Col span="12">

                    </Col>
                </Row>
                <Row :gutter="32">
                  <Col span="24">
                  <FormItem prop="comments" :label="lang.comments">
                    <Input v-model="cloneData.comments" clearable :placeholder="lang.commentsPlaceholder"
                           type="textarea"/>
                  </FormItem>
                  </Col>
                </Row>
            </Form>
        </div>
        <div slot="footer">
            <Button v-if="drawer.type === 'edit'|| drawer.type === 'new'" type="primary" @click="handleDataSubmit"
                    :loading="loading">{{ lang.submit }}
            </Button>
        </div>
    </Modal>
</template>

<script>
    import { cloneDeep } from 'lodash';
    export default {
        name: 'cfg-instance-create',
        data () {
            return {
                styles: {},
                cloneData: {},
                features: [],
                general: {
                    status: { type: 'Boolean', defaultValue: false },
                    name: { type: 'string', defaultValue: '' },
                },
                propInfo: {},
                values: {},
                modelClassList: [],
                freshForm: false,
                form: {
                    title: 'test',
                    labelWidth: 160,
                    interval: 24,
                    itemWidth: null,
                    itemAlign: true,
                    col: 2,
                    disabled: false,
                    submit: 'submit',
                    confirmPrompt: 'confirmPrompt',
                    cancel: 'cancel'
                },
                fields: [],
                localOptions: [],
                formData: {},
                formStyle: {},
                formHeight: 200,
            }
        },
        props: {
            data: {
                default: () => {
                    return {}
                }
            },
            loading: {
                default: () => {
                    return false;
                }
            },
            show: {
                default: () => {
                    return false;
                }
            },
            drawer: {
                default: () => {
                    return {
                        show: false,
                        type: 'read', // edit || read || new
                    };
                }
            },
            modelType: {
                default: () => {
                    return 'entity'
                }
            },
            modelList: {
                default: () => {
                    return []
                }
            }
        },
        computed: {
            labelWidth () {
                return 100;
            },
            labelPosition () {
                return 'right';
            },
            lang () {
                return {
                    'en-US': {
                        edit: 'edit',
                        new: 'new',
                        detail: 'detail',
                        action: 'action',
                        submit: 'submit',
                        type: 'type',
                        typePlaceholder: 'Please select type',
                        className: 'className',
                        classNamePlaceholder: 'Please enter class name',
                        version: 'version',
                        versionPlaceholder: 'Please enter version',
                        published: 'published',
                        instanceName: 'instance name',
                        instanceNamePlaceholder: 'Please instance name',
                        comments: 'comments',
                        commentsPlaceholder: 'Please enter comments',
                        modelProperties: 'Model Attribute Configuration',
                        typeRuleMsg: 'Please select property type',
                        classNameRuleMsg: 'Please enter class name',
                        instanceNameRuleMsg: 'Please instance name'
                    },
                    'zh-CN': {
                        edit: '编辑',
                        new: '添加',
                        detail: '查看',
                        action: '操作',
                        submit: '提交',
                        type: '所属类型',
                        typePlaceholder: '请选择所属类型',
                        className: '模型类名',
                        classNamePlaceholder: '请输入模型类名',
                        version: '版本号',
                        versionPlaceholder: '请输入版本号',
                        published: '是否发布',
                        instanceName: '实例名',
                        instanceNamePlaceholder: '请输入实例名',
                        comments: '说明',
                        commentsPlaceholder: '请输入描述信息',
                        modelProperties: '模型属性配置',
                        typeRuleMsg: '请选择所属类型',
                        classNameRuleMsg: '请输入模型类名',
                        instanceNameRuleMsg: '请输入实例名'
                    },
                }[this.G_Locale]
            },
            typeList() {
                return this.$modelObject.getModelType(this.modelType);
            },
            ruleValidate () {
                return {
                    type: [
                        { required: true, message: this.lang.typeRuleMsg, trigger: 'blur' }
                    ],
                    className: [
                        { required: true, message: this.lang.classNameRuleMsg, trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: this.lang.instanceNameRuleMsg, trigger: 'blur' }
                    ],
                }
            }
        },
        mounted () {
            this.cloneData = cloneDeep(this.data)
            this.modelList.map(m => {
                this.modelClassList.push({ label: m.className, value: m.className })
            })
        },
        methods: {
            /**
             * 提交添加或修改数据
             */
            handleDataSubmit () {
                this.$refs._frm.validate(valid => {
                    if (valid) {
                        this.$emit('dataSubmit', this.cloneData, this.drawer.type);
                    }
                });
            },

            handleCloseEdit () {
                this.drawer.show = false
                this.$emit('closeEdit');
            }
        }
    }
</script>
